<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>

    <div class="search">
        <input id="inp" type="text" placeholder="请输入要搜索的内容">
        <button id="btn">搜索</button>
    </div>
    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>


    <script>

        var data = [
            {
                goodsId: '0001',
                goodsSrc: 'https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/58684/40/20074/104961/639dc10dEb05d6e14/8c373ffd9e1a0dea.jpg.avif',
                goodsTitle: '空气净化器1',
                goodsDes: '华为智选 720全效空气净化器2 专业除甲醛 长效分解净化 除味除菌除霾 空气消毒 负离子紫外线杀菌除过敏原',
                goodsPrice: 1499
            },
            {
                goodsId: '0002',
                goodsSrc: 'https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/96826/8/34895/94973/639f31d9Eb39c7863/6a42981bf3fec6e1.jpg.avif',
                goodsTitle: '马桶',
                goodsDes: '箭牌（ARROW）抽水马桶家用虹吸坐便器小尺寸普通座便 小户型卫生间坐厕AE1126M',
                goodsPrice: 2499
            },
            {
                goodsId: '0003',
                goodsSrc: 'https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/58684/40/20074/104961/639dc10dEb05d6e14/8c373ffd9e1a0dea.jpg.avif',
                goodsTitle: '空气净化器2',
                goodsDes: '华为智选 720全效空气净化器2 专业除甲醛 长效分解净化 除味除菌除霾 空气消毒 负离子紫外线杀菌除过敏原',
                goodsPrice: 1499
            },
            {
                goodsId: '0004',
                goodsSrc: 'https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/96826/8/34895/94973/639f31d9Eb39c7863/6a42981bf3fec6e1.jpg.avif',
                goodsTitle: '马桶2',
                goodsDes: '箭牌（ARROW）抽水马桶家用虹吸坐便器小尺寸普通座便 小户型卫生间坐厕AE1126M',
                goodsPrice: 2499
            }
        ];

        var res = '';

        data.forEach(function (v) {
            res += `
                <li>
                    <img src="${v.goodsSrc}" alt="">
                    <h3>${v.goodsTitle}</h3>
                    <p>${v.goodsDes}</p>
                    <strong>${v.goodsPrice}</strong>
                </li>
            `
        })


        var oUl = document.getElementById('list');
        oUl.innerHTML = res;




        // 实现搜索
        var oInp = document.getElementById('inp');
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function () {
            // 获取输入框的内容
            var kw = oInp.value;
            // 如果没有输入
            if (!kw) {
                return
            }
            // 过滤数据 --- 找到包含马桶的数据

            var arr = data.filter(function (v) {
                return v.goodsTitle.includes(kw)
            })

            console.log(arr);

            // 重新渲染

            var res = '';

            arr.forEach(function (v) {
                res += `
                    <li>
                        <img src="${v.goodsSrc}" alt="">
                        <h3>${v.goodsTitle}</h3>
                        <p>${v.goodsDes}</p>
                        <strong>${v.goodsPrice}</strong>
                    </li>
                `
            })


            var oUl = document.getElementById('list');
            oUl.innerHTML = res;

        }

    </script>

</body>

</html>